<template>
  <div class="page submit">
    <!-- 头部 -->
    <van-nav-bar title="确认订单" left-arrow @click-left="$router.go(-1)" />
    <!-- 联系人 -->
    <van-contact-card
      type="edit"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="onEdit"
    />
    <!-- 商品 -->
    <van-card
      v-for="item in obj.carts"
      :key="item.cartId"
      :num="item.buyNum"
      :price="item.price / 100"
      :desc="item.slaveName"
      :title="item.masterName"
      :thumb="item.imgUrl"
    />
    <!-- 金额和运费 -->
    <van-cell-group inset>
      <van-cell title="商品总金额" :value="obj.totalMoney" value-class="red" />
      <van-cell title="运费" value="￥0" value-class="red" />
    </van-cell-group>
    <!-- 其他信息 -->
    <van-cell-group inset>
      <van-cell center value="0张可用" class="mt-10" is-link>
        <div class="flex aic f16" slot="title">
          <van-icon class="red" name="coupon-o" />
          <span class="ml-5">优惠卷</span>
        </div>
      </van-cell>
      <van-cell center value="0张可用" is-link>
        <div class="flex aic f16" slot="title">
          <van-icon class="red" name="coupon-o" />
          <span class="ml-5">苏打卷</span>
        </div>
      </van-cell>
      <van-cell center value="￥0.00" value-class="red" is-link>
        <div class="flex aic f16" slot="title">
          <van-icon class="red" name="gem-o" />
          <span class="ml-5">余额</span>
        </div> </van-cell
      ><van-cell center value="不开发票" is-link>
        <div class="flex aic f16" slot="title">
          <van-icon class="red" name="balance-list-o" />
          <span class="ml-5">发票</span>
        </div>
      </van-cell>
    </van-cell-group>
    <!--  -->
    <!-- ActionSheet 动作面板 -->
    <van-action-sheet v-model="show" title="标题">
      <div class="content">
        <van-radio-group v-model="payType">
          <!-- 微信支付 -->
          <van-cell>
            <van-icon slot="title" class="f22 green" name="wechat-pay" />
            <van-radio slot="right-icon" name="wx" />
          </van-cell>

          <!-- 支付宝支付 -->
          <van-cell>
            <van-icon slot="title" class="f22 blue" name="alipay" />
            <van-radio slot="right-icon" name="zfb" />
          </van-cell>

          <!-- 立即支付按钮 -->
          <p class="flex jc-c mt-20">
            <van-button type="danger" @click="payNum">立即支付</van-button>
          </p>
        </van-radio-group>
      </div>
    </van-action-sheet>
    <!-- SubmitBar 提交订单栏 -->
    <van-submit-bar
      :loading="loading"
      :price="obj.totalMoney * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>
<script>
import $axios from "@/utils/request";
export default {
  data() {
    return {
        preOrderId: this.$route.query.preOrderId,
      //提交订单栏的loading
      loading: false,
      //显示支付面板
      show: false,
      //显示支付面板
      payType: "wx",
      //联系人信息
      currentContact: {
        name: "张三",
        tel: "13000000000",
      },
      //预订单详情
      obj: {},
      //接收跳转后台参数
      orderObj: {},
    };
  },

  created() {
    //获取预订单详情
    this.getDetail();
  },
  methods: {
    async getDetail() {
      let res = await $axios.get("/preOrder/detail", {
        preOrderId: this.preOrderId,
      });
      this.obj = res.result;
    },
    onEdit() {
      this.$toast("编辑");
    },
    async onSubmit() {
      try {
        let data = {
          //联系人信息
          addressInfo: this.currentContact,
          //全部费用
          allFee: this.obj.totalMoney,
          //优惠
          discount: 0,
          preOrderId: this.preOrderId,
        };
        console.log(data)
        let res = await this.$axios.post("/order/add", data);
        this.orderObj = res.result;
        this.show = true;
      } catch (error) {
        console.log(error);
      }
    },

    //跳转支付页面
    async payNum() {
      try {
        let data = {
          orderId: this.orderObj.orderId,
          allFee: this.obj.totalMoney,
        };
        let res = await this.$axios.post("/order/pay", data);
        this.$router.push({
          path: "/pay",
          query: {
            //付款二维码
            ewm: res.result.qrcode,
            orderId: this.orderObj.orderId,
            //全部费用
            allFee: this.obj.totalMoney,
            //创建时间
            createTime: this.orderObj.createTime
          },
        });
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="less">
.submit {
  .van-card {
    margin-top: 1px;
  }
  .content {
    padding: 16px 16px 40px;
    .van-button {
      width: 90%;
      border-radius: 5px;
    }
    .green {
      color: green;
    }
    .blue {
      color: blue;
    }
  }
}
</style>